<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
			color: #fff;
			font-size: 30px;
			line-height: 200px;
			text-align: center;

		}
		.box{
			width: 300px;
			height: 300px;
			background: red url() 0 0 no-repeat;
			color: #fff;
			font-size: 30px;
			line-height: 200px;
			text-align: center;
			float: left;

		}
	</style>
	<script type="text/javascript">
		window.onload=function () {
			// 捉元素
			box = document.getElementById('box');
			// 捉元素
			// btn = document.getElementById('btn');
			btn = document.getElementsByClassName('btn')
			// 加事件
			// start = true;
			btn[0].onclick  = function () {
				console.log(btn);return;
				if(btn.innerHTML=="开始"){
					time = setInterval(run, 500);//启动定时器
					btn.innerHTML  ="暂停"
					// start = false;
				}else{
					clearInterval(time);

					btn.innerHTML  ="开始"
					// start= true;
				}
			}

			color = ['red','green','yellow','blue','pink'];

			// num = 0;
			// function run() {

			// 	box.style.background =color[num];

			// 	if(num==color.length-1){
			// 		num = 0;
			// 	}else{
			// 		num++;
			// 	}
				
			// }
			function run() {
				// num = Math.round(Math.random()*4);
				red = Math.round(Math.random()*(255-150)+150);
				green = Math.round(Math.random()*(255-150)+150);
				blue = Math.round(Math.random()*(255-150)+150);
				box.style.background ="rgb("+red+","+green+","+blue+")";
			}
		}
	</script>
</head>
<body>
	<button  class="btn">开始</button>
	<button  class="btn">开始</button>
	<div id="box"></div>

	<div class="box">1</div>
	<div class="box">2</div>
	<div class="box">3</div>
	<div class="box">4</div>
	<div class="box">5</div>
	<div class="box">6</div>
	<div class="box">6</div>
	<div class="box">7</div>
	<div class="box">8</div>
</body>
</html>